<template>
  <div class="home">
    <el-row :gutter="10">
      <el-col :span="20">
        <el-card shadow="never" class="CommonFun">
          <div slot="header" class="clearfix">
            <span class="header">常用功能</span>
          </div>
          <ul class="CommonFun_ul">
            <li @click="$router.push({name: 'dictionary-dictinfoMaintain'})">
              <img src="~@/assets/img/楼栋.png" alt />
              <div class="txt">楼盘字典</div>
            </li>
            <li @click="$router.push({name: 'Newdisk-NewdiskMaintain'})">
              <img src="~@/assets/img/商业新房.png" alt />
              <div class="txt">商业新房</div>
            </li>
            <li @click="$router.push({name: 'customer-customerhouseinfo'})">
              <img src="~@/assets/img/客户中心.png" alt />
              <div class="txt">客户中心</div>
            </li>
            <li @click="$router.push({name: 'house-houseinfo'})">
              <img src="~@/assets/img/房源中心.png" alt />
              <div class="txt">房源中心</div>
            </li>
            <li>
              <img src="~@/assets/img/学习中心.png" alt />
              <div class="txt">学习中心</div>
            </li>
            <li @click="$router.push({name: 'demo-news'})">
              <img src="~@/assets/img/交流中心.png" alt />
              <div class="txt">交流中心</div>
            </li>
            <li @click="$router.push({name: 'sys-sysremind'})">
              <img src="~@/assets/img/通知提醒.png" alt />
              <div class="txt">通知提醒</div>
            </li>
          </ul>
        </el-card>

        <el-card shadow="never" class="business martop5">
          <div slot="header" class="clearfix">
            <span class="header">公司业务</span>
          </div>
          <ul class="business_ul">
            <li>
              <img src="~@/assets/img/写字楼.png" alt />
              <div class="txt">写字楼</div>
            </li>
            <li>
              <img src="~@/assets/img/商铺.png" alt />
              <div class="txt">商铺</div>
            </li>
            <li>
              <img src="~@/assets/img/公寓.png" alt />
              <div class="txt">公寓</div>
            </li>
            <li>
              <img src="~@/assets/img/新房.png" alt />
              <div class="txt">新房</div>
            </li>
            <li>
              <img src="~@/assets/img/二手房.png" alt />
              <div class="txt">二手房</div>
            </li>
            <li>
              <img src="~@/assets/img/金融.png" alt />
              <div class="txt">金融</div>
            </li>
            <li>
              <img src="~@/assets/img/装修.png" alt />
              <div class="txt">装修</div>
            </li>
            <li>
              <img src="~@/assets/img/工商.png" alt />
              <div class="txt">工商</div>
            </li>
            <li>
              <img src="~@/assets/img/财税.png" alt />
              <div class="txt">财税</div>
            </li>
            <li>
              <img src="~@/assets/img/互联网.png" alt />
              <div class="txt">互联网</div>
            </li>
          </ul>
        </el-card>

        <el-row :gutter="7">
          <el-col :span="12">
            <el-card shadow="never" class="GoodNews martop5 cardpad">
              <div slot="header" class="clearfix">
                <span class="header">喜报</span>
              </div>
              <el-table :data="newDealList" style="width: 100%" height="210">
                <!-- <el-table-column prop="date" label="部门" width="60"></el-table-column> -->
                <el-table-column prop="customerAgent" label="成交员工" width="80"></el-table-column>
                <el-table-column prop="type" label="成交物业" width="100">
                  <template slot-scope="scope">{{ $getDictLabel("dictType", scope.row.type) }}</template>
                </el-table-column>
                <el-table-column prop="area" label="面积" width="60"></el-table-column>
                <el-table-column prop="price" label="成交金额" width="80"></el-table-column>
                <el-table-column prop="commission" label="佣金" width="60"></el-table-column>
                <el-table-column prop="signingData" label="成交日期">
                  <template
                    slot-scope="scope"
                  >{{scope.row.dealDate?scope.row.dealDate.substring(0,10):scope.row.dealDate}}</template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="never" class="AgentList martop5 cardpad">
              <div slot="header" class="clearfix">
                <span class="header">经纪人排行榜</span>
              </div>
              <el-carousel height="210px" :interval="4000">
                <el-carousel-item v-for="(item,index) in agentDealList" :key="index">
                  <el-table :data="item" style="width: 100%" height="210">
                    <el-table-column prop="deptName" label="部门" width="230">
                      <template slot-scope="scope">
                        <span :class="['ranking','ranking'+scope.row.rowNum]">{{scope.row.rowNum}}</span>
                        {{scope.row.deptName}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="commission" label="业绩"></el-table-column>
                    <el-table-column prop="userName" label="经纪人"></el-table-column>
                  </el-table>
                </el-carousel-item>
              </el-carousel>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="7">
          <el-col :span="12">
            <el-card shadow="never" class="AgentList martop5 cardpad">
              <div slot="header" class="clearfix">
                <span class="header">团队排行榜</span>
              </div>
              <el-table :data="deptDealList" style="width: 100%" height="210">
                <el-table-column prop="deptName" label="部门" width="230">
                  <template slot-scope="scope">
                    <span :class="['ranking','ranking'+scope.row.rowNum]">{{scope.row.rowNum}}</span>
                    {{scope.row.deptName}}
                  </template>
                </el-table-column>
                <el-table-column prop="userName" label="部门负责人"></el-table-column>
                <el-table-column prop="commission" label="业绩"></el-table-column>
              </el-table>
              <!-- <el-carousel height="210px" :interval="5000">
                <el-carousel-item v-for="(item,index) in deptDealList" :key="index">
                  <el-table :data="item" style="width: 100%" height="210">
                    <el-table-column prop="deptName" label="部门" width="230">
                      <template slot-scope="scope">
                        <span :class="['ranking','ranking'+scope.row.rowNum]">{{scope.row.rowNum}}</span>
                        {{scope.row.deptName}}
                      </template>
                    </el-table-column>
                    <el-table-column prop="userName" label="部门负责人"></el-table-column>
                    <el-table-column prop="commission" label="业绩"></el-table-column>
                  </el-table>
                </el-carousel-item>
              </el-carousel>-->
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="never" class="AgentList martop5 Pincrown">
              <div slot="header" class="clearfix">
                <span class="header">销冠展示</span>
              </div>
              <ul>
                <li v-for="item in championList">
                  <div class="crown_img">
                    <!-- <img src="~@/assets/img/1587021006(1).jpg" alt /> -->
                    <img :src="item.headUrl" alt />
                  </div>
                  <div class="Teamname">
                    <span v-if="item.type==1">月度 -</span>
                    <span v-else-if="item.type==2">季度 -</span>
                    <span v-else-if="item.type==3">年度 -</span>
                    {{item.name}}
                  </div>
                </li>
              </ul>
            </el-card>
          </el-col>
        </el-row>

        <el-row :gutter="7">
          <el-col :span="12">
            <el-card shadow="never" class="NewDisk martop5 Resource">
              <div slot="header" class="clearfix">
                <span class="header">新盘展示</span>
                <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="$router.push({name: 'Newdisk-NewdiskMaintain'})"
                >更多</el-button>
              </div>
              <ul>
                <li
                  v-for="item in projectList"
                  @dblclick="$router.push({name: 'NewdiskView',query:{ID:item.id}})"
                >
                  <el-row :gutter="8">
                    <el-col :span="4">
                      <div class="img">
                        <img :src="item.imgUrl" alt />
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="infor1">{{item.name}}</div>
                      <div class="infor2">
                        <span>{{ $getDictLabel("dictType", item.type)}}</span>
                        <el-divider direction="vertical"></el-divider>
                        {{$Dictionaries("CityRegion", item.districtCode)}}
                        <el-divider direction="vertical"></el-divider>
                        {{$Dictionaries("BusinessPage", item.business)}}
                      </div>
                      <div
                        class="infor3"
                      >最新开盘 ：{{item.sellTime?item.sellTime.substring(0,10):item.sellTime}}</div>
                    </el-col>
                    <el-col :span="6">
                      <div class="ofarea">{{item.areas}}㎡ - {{item.areae}}㎡</div>
                    </el-col>
                    <el-col :span="6">
                      <div class="Price">{{item.price}}元/ ㎡ （均价）</div>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="never" class="NewDisk martop5 Resource">
              <div slot="header" class="clearfix">
                <span class="header">优质房源</span>
                <el-button
                  style="float: right; padding: 3px 0"
                  type="text"
                  @click="$router.push({name: 'house-houseinfo'})"
                >更多</el-button>
              </div>
              <ul>
                <li v-for="item in houseList" @dblclick="goHousingPages(item)">
                  <el-row :gutter="8">
                    <el-col :span="4">
                      <div class="img">
                        <img :src="item.imageUrl" alt />
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="infor1">{{item.dictName}}</div>
                      <div class="infor2">
                        <span>{{ $getDictLabel("dictType", item.type)}}</span>
                        <el-divider direction="vertical"></el-divider>
                        {{$Dictionaries("CityRegion", item.districtCode)}}
                        <el-divider direction="vertical"></el-divider>
                        {{$Dictionaries("BusinessPage", item.business)}}
                      </div>
                      <div class="infor3">最新开盘 ：2020-06-06</div>
                    </el-col>
                    <el-col :span="5">
                      <div class="ofarea">{{item.area}}㎡</div>
                    </el-col>
                    <el-col :span="7">
                      <div class="Price">{{item.price}}元/ ㎡ （均价）</div>
                    </el-col>
                  </el-row>
                </li>
              </ul>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <el-card shadow="never">
          <div class="text_center">
            <el-avatar :size="80" :src="Userinfo.headUrl" class="userImg">
              <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
            </el-avatar>
          </div>
          <div class="text_center martop5">{{Userinfo.realName}}</div>
          <p class="text_center colorGray">
            {{Userinfo.deptName}}
            <!-- YH-10002 / 总部 / 总经理 -->
            <!-- <el-divider direction="vertical"></el-divider> -->
          </p>
          <div class="text_center">
            <el-button type="text" @click="$router.push({name: 'resource-selfresourcehouse'})">我的房源</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button
              type="text"
              @click="$router.push({name: 'resource-selfresourcecustomer'})"
            >我的客源</el-button>
          </div>
          <div class="text_center martop5">
            <el-popover ref="popover" placement="right" title="微信" width="80" trigger="click">
              <el-avatar shape="square" class="weixingImg" :size="120" :src="Userinfo.wxPhoto"></el-avatar>
            </el-popover>
            <el-button type="primary" v-popover:popover>
              <i class="el-icon-mobile-phone"></i>
              {{Userinfo.mobile}}
            </el-button>
          </div>
        </el-card>
        <el-card shadow="never" class="Notice martop5">
          <div slot="header" class="clearfix">
            <span class="header">公告</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="$router.push({name:'trends-trendsnotice'})"
            >更多</el-button>
          </div>
          <ul>
            <li v-for="item in noticeList">
              {{item.title}}
              <span class="newsicon">new</span>
            </li>
          </ul>
        </el-card>
        <el-card shadow="never" class="Notice martop5">
          <div slot="header" class="clearfix">
            <span class="header">公司动态</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="$router.push({name:'trends-trendscompany'})"
            >更多</el-button>
          </div>
          <ul>
            <li v-for="item in companyList">{{item.title}}</li>
          </ul>
        </el-card>
        <el-card shadow="never" class="Notice martop5">
          <div slot="header" class="clearfix">
            <span class="header">新闻动态</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="$router.push({name:'trends-trendsnews'})"
            >更多</el-button>
          </div>
          <ul>
            <li v-for="item in newsList">{{item.title}}</li>
          </ul>
        </el-card>
        <el-card shadow="never" class="Activity martop5">
          <div slot="header" class="clearfix">
            <span class="header">文化活动</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="$router.push({name:'trends-trendsactivity'})"
            >更多</el-button>
          </div>
          <ul>
            <li v-for="item in activityList">
              <div class="img">
                <img
                  src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
                  alt
                />
              </div>
              <div class="txt">
                <div>{{item.title}}</div>
                <div class="svgColor2">{{item.pubDate?item.pubDate.substring(0,10):item.pubDate}}</div>
              </div>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      projectList: [],
      houseList: [],
      Userinfo: {
        headUrl: ""
      },
      noticeList: [],
      companyList: [],
      newsList: [],
      activityList: [],
      newDealList: [],
      agentDealList: [],
      deptDealList: [],
      championList: []
    };
  },
  created() {
    this.getSimpleUserinfo();
    this.getProjectList();
    this.getHouseList();
    this.getNoticeList();
    this.getCompanyList();
    this.getNewsList();
    this.getActivityList();
    this.getNewDealList();
    this.getAgentDealList();
    this.getdeptDealList();
    this.getchampionList();
  },
  methods: {
    getSysInfo() {
      this.$http
        .get("/sys/info")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.sysInfo = res.data;
        })
        .catch(() => {});
    },
    //获取新盘推荐列表
    getProjectList() {
      this.$http
        .get("/sys/home/projectList", {
          params: {
            limit: 5
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.projectList = res.data.list;
        })
        .catch(() => {});
    },
    //获取房源推荐列表
    getHouseList() {
      this.$http
        .get("/sys/home/houseList", {
          params: {
            limit: 5
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.houseList = res.data.list;
        })
        .catch(() => {});
    },
    //获取用户信息
    getSimpleUserinfo() {
      this.$http
        .get("/sys/home/simpleUserinfo")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.Userinfo = res.data;
        })
        .catch(() => {});
    },
    //获取公告通知
    getNoticeList() {
      this.$http
        .get("/sys/home/noticeList", {
          params: {
            limit: 5
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.noticeList = res.data.list;
        })
        .catch(() => {});
    },
    //获取公司动态
    getCompanyList() {
      this.$http
        .get("/sys/home/companyList", {
          params: {
            limit: 5
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.companyList = res.data.list;
        })
        .catch(() => {});
    },
    //获取新闻动态
    getNewsList() {
      this.$http
        .get("/sys/home/newsList", {
          params: {
            limit: 5
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.newsList = res.data.list;
        })
        .catch(() => {});
    },
    //获取文化活动
    getActivityList() {
      this.$http
        .get("/sys/home/activityList", {
          params: {
            limit: 5
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.activityList = res.data.list;
        })
        .catch(() => {});
    },
    //获取喜报
    getNewDealList() {
      this.$http
        .get("/sys/home/newDealList", {
          params: {
            limit: 5
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.newDealList = res.data.list;
        })
        .catch(() => {});
    },
    //获取经纪人列表
    getAgentDealList() {
      this.$http
        .get("/sys/home/agentDealList", {
          params: {
            limit: 5
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          let arr = res.data;
          if (arr.length > 0) {
            let a = Math.floor(arr.length / 5);
            for (let i = 0; i < a; i++) {
              this.agentDealList.push(arr.slice(i * 5, i * 5 + 5));
            }
          }
        })
        .catch(() => {});
    },
    //获取团队排行列表
    getdeptDealList() {
      this.$http
        .get("/sys/home/deptDealList", {
          params: {
            limit: 5
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.deptDealList = res.data;
          // res.data.length = 20;
          // let arr = res.data;
          // let a = Math.floor(arr.length / 5);
          // for (let i = 0; i < a; i++) {
          //   this.deptDealList.push(arr.slice(i * 5, i * 5 + 5));
          // }
        })
        .catch(() => {});
    },
    //获取销冠排行列表
    getchampionList() {
      this.$http
        .get("/sys/home/championList", {
          params: {
            limit: 5,
            type: 1
          }
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.championList = res.data;
        })
        .catch(() => {});
    },
    //跳转房源详情
    goHousingPages(item) {
      this.$router.push({
        name: "HousingPages",
        query: {
          ID: item.id,
          transactionType: item.transactionType,
          type: item.type
        }
      });
    }
  }
};
</script>
